import React, {Component} from 'react';
import styles from './index.module.css'
import FilterFoot from "../../../../components/FilterFoot/FilterFoot";
class FilterMore extends Component {
    state = {
        selectedValues: this.props.defaultMore
    };
    renderFilters = (data) => {
        const {selectedValues} = this.state;

        return data.map(item => {
            let isSelected = selectedValues.indexOf(item.value) > -1;

            return <span key={item.value} className={[styles.tag,isSelected ? styles.tagActive: ''].join(' ')} onClick={() =>this.active(item.value)}>{item.label}</span>
        })
    };

    active = (value) => {
    const {selectedValues} = this.state
        //判断被选中项是否在数组中
        let newSelectedValues;
    newSelectedValues = [...selectedValues];
    if(newSelectedValues.indexOf(value) <= -1){
        newSelectedValues.push(value)
    }else {
        let index = newSelectedValues.findIndex(item =>item ===value);
        newSelectedValues.splice(index,1)
    }
    this.setState({
        selectedValues:newSelectedValues
    })
};
    //清除按钮
    canCle = () =>{
        this.setState({
            selectedValues:[]
        })
    };
    //确定按钮
    ok = () =>{
        const {onSave,type} = this.props;
        onSave(type,this.state.selectedValues)
    };

    //遮罩层
    // noNe = () =>{
    //     const {onCancle} = this.props;
    //     onCancle
    // }
    render() {
        const {data: {roomType, oriented, floor, characteristic},onCancle} = this.props;
        // console.log(roomType, oriented, floor, characteristic)
        return (
            <div className={styles.root}>
                {/*遮罩层*/}
                <div className={styles.mask} onClick={onCancle}/>
                <div className={styles.filteritem}>
                    <div className={styles.item}>
                        <div>户型</div>
                        <div className={styles.title}>
                            {this.renderFilters(roomType)}
                        </div>
                    </div>
                    <div className={styles.item}>
                        <div>朝向</div>
                        <div className={styles.title}>
                            {this.renderFilters(oriented)}
                        </div>
                    </div>
                    <div className={styles.item}>
                        <div>楼层</div>
                        <div className={styles.title}>
                            {this.renderFilters(floor)}
                        </div>
                    </div>
                  <div className={styles.item}>
                      <div>亮点</div>
                      <div className={styles.title}>
                          {this.renderFilters(characteristic)}
                      </div>
                  </div>
                    <div className={styles.filterfoot}>
                        <FilterFoot onText='清除' onCancle={this.canCle} onOk={this.ok} />
                    </div>
                </div>

            </div>
        );
    }
}

export default FilterMore;
